<template>
    <div class="chart-container">
        <div class="chart">
            <VChart :option="option" />
        </div>
        <div class="message">今日已完成 {{ doneLi.length }} 项待办 ，共 {{ total }} 项待办</div>
    </div>
</template>

<script setup>

import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, computed, watch, onBeforeMount } from "vue";
import { useStore } from "vuex"
import dayjs from "dayjs"

const store = useStore();


const TodoList = computed(() => store.state.todo.TodoList.filter(item => dayjs(item.date).isSame(dayjs(), 'D')));

const option = ref({});

const total = computed(() => TodoList.value.length);
const doneLi = computed(() => TodoList.value.filter((item) => item.done === true))
// const undone = computed(() => total - doneLi.value.length);


onBeforeMount(setPie)

watch(TodoList, setPie, { deep: true });

function setPie() {
    let undone = total.value - doneLi.value.length;
    option.value = {
        title: {
            text: "概览",
            left: "center",
            top: 10
        },
        tooltip: {
            trigger: "item",
            // formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // legend: {
        //     orient: "horizontal",
        //     top: "bottom",
        //     data: ["A", "B", "C"]
        // },
        series: [
            {
                name: '概览',
                type: 'pie',
                // radius: ['40%', '70%'],
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                },
                data: doneLi.value || undone ? [{ value: undone, name: "未完成" }, { value: doneLi.value.length, name: "已完成" }] : null,
                // data: [{ value: 0, name: "未完成" }, { value: 0, name: "已完成" }],
                radius: ['40%', '70%']
            }
        ]
    }
}

use([
    CanvasRenderer,
    PieChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent
]);
</script>

<style scoped lang="scss">
.chart-container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .chart {
        height: 100%;
        width: 100%;
    }
}
</style>
